<template>
	<view class="placeAn">
		<!-- <view class="black_1"> -->
			<!-- <image class="img" src="/static/logo.png"></image>
			<text class="text1">幸运小羊羊</text> -->
		<!-- </view> -->

		<view class="black_2">
			<view class="left">
				<view class="text1">{{info.num}} ZY</view>
			</view>
			<view class="line"></view>
			<view class="left">
				<view class="text1">
					{{info.unit_price}} CNY
				</view>
				<view class="text2">单价</view>
			</view>
		</view>

		<view class="black_3">
			<text class="text1">卖家收款方式</text>
			<template v-for="(item,index) in info.collections">
				<image class="img" :src="'/static/tading/'+item.type+'.png'"></image>
			</template>
		</view>
		<view class="black_4">
			<text class="text1">付款方式</text>
			<template ></template>
			<view class="right" @click="selectPayType()">
				<template v-if="paytTypeUrl">
					<image class="img" :src="'/static/tading/'+paytTypeUrl+'.png'"></image>
				</template>
				<template v-else>
					<text class="text1">请选择付款方式</text> 
				</template>
				
				<uni-icons type="right"
					size="12" color="#BDB4B4">
					</uni-icons>
			</view>
			
		</view>
		<view class="black_4">
			<text class="text1">购买数量</text>
			<view class="right">≈{{info.num}} ZY
			</view>
		</view>
		<view class="black_4">
			<text class="text1">实付款</text>
			<view class="right">{{info.total_price}} CNY 
			</view>
		</view>
		

		<view class="black_5">
			温馨提示
		</view>
		<view class="black_6">
			<text class="text1">1.【实名付款】请使用与平台实名信息一致的账户付款\n2.【信用等级】成交单量，成交效率将影响您的信用等级，等级越高
				用户交易推送靠前\n3.【交易】请实时留意订单状态</text>
		</view>

		<view class="black_7" @click="toPay()">立即下单</view>
		<payType ref="payType" :success='payTypeSucees' :add="selectAddPayType"></payType>
		<tipsType ref="tipsType" :success='tipsTypeSucees'></tipsType>
		<addPayType ref="addPayType" :success="addTypeSucees"></addPayType>
	</view>
</template>

<script>
	import payType from '@/components/pay/payType.vue'

	import tipsType from '@/components/zmessage/tipsType.vue'
	import addPayType from '@/components/pay/addPayType.vue'
	export default {
		components: {
			payType,
			tipsType,
			addPayType
		},
		data() {
			return {
				type: 0,
				info: {
					"id": 12,
					"num": 1000,
					"unit_price": "1.25",
					"total_price": "1250.00",
					"collections": [{
							"id": 2,
							"type": "wechat"
						},
						{
							"id": 3,
							"type": "alipay"
						}
					],
					"count_trade_inf": {
						"finish_num": 50,
						"finish_raio": 86
					}
				},
				collections:'',
				paytTypeUrl:''
			};
		},
		onLoad(opt) {
			this.type = opt.type
			this.info = JSON.parse(opt.data)
		},
		methods: {
			toPay() {
				// if (this.type == 1) {
				// 	this.$refs.tipsType.open()
				// } else {
				// 	this.$refs.payType.open()
				// }
				if(this.collections == ''){
					uni.showToast({
						title:'请选择支付方式',
						icon:'none'
					})
					return
				}
				this.$refs.tipsType.open()
			},
			selectPayType() {
				
				this.$refs.payType.open2(this.info.collections)
			},
			tipsTypeSucees() {
				console.log(11111111)
				// uni.navigateTo({
				// 	url: '/pages/trading/createOder?id='+this.info.id+'&collection_id='+this.collections
				// })
				console.log(this.collections)
				this.custom.tool.jump(1,'trading/createOder?id='+this.info.id+'&collection_id='+this.collections)
				
			},
			payTypeSucees(item) {
				
				this.collections = item.id
				this.paytTypeUrl = item.type
				
			},
			selectAddPayType(){
				this.$refs.addPayType.open()
			},
			addTypeSucees(item) {
				uni.navigateTo({
					url: '/pages/my/addPay?type=' + item.type + '&name=' + item.name
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.black_1 {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: 800;
		color: #333333;
		padding: 20px 10px;

		border-bottom: 2rpx solid #ECECEC;

		.img {
			border-radius: 50%;
			height: 24px;
			width: 24px;
		}

		.text1 {
			margin-left: 10px;
		}
	}

	.black_2 {
		font-size: 35rpx;
		font-weight: 800;
		color: #262626;
		display: flex;
		justify-content: space-between;
		padding: 20px 10px;
		border-bottom: 2rpx solid #ECECEC;

		.left {
			text-align: center;
			flex: 1;

			.text1 {}

			.text2 {
				font-size: 25rpx;
				font-weight: 400;
				color: #969696;
			}
		}

		.line {
			width: 1rpx;
			background-color: #ECECEC;
			;
		}
	}

	.black_3 {
		border-bottom: 2rpx solid #ECECEC;
		padding: 15px 10px;
		display: flex;
		align-items: center;

		.text1 {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}

		.img {
			margin-left: 10px;
			width: 20px;
			height: 20px;
		}
	}

	.black_4 {
		border-bottom: 2rpx solid #ECECEC;
		padding: 15px 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;

		.right {
			font-size: 25rpx;
			font-weight: bold;
			color: #262626;
			display: flex;
			align-items: center;
			.text1 {
				margin-right: 10px;
				font-size: 25rpx;
				font-weight: 400;
				color: #969696;
			}
			.img{
				width: 20px;
				height: 20px;
			}
		}


	}

	.black_5 {
		font-size: 28rpx;
		font-weight: 800;
		color: #333333;
		padding: 20px 10px 0px 10px;
	}

	.black_6 {
		padding: 10px;

		.text1 {
			font-size: 23rpx;
			font-weight: 400;
			color: #969696;

		}

	}

	.black_7 {
		margin: 80px 20px 20px 20px;
		background: #FE903D;
		border-radius: 14rpx;
		padding: 10px;
		text-align: center;
		font-size: 35rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>